﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>仿QQ阅读</title>
    <link href="../../../css/Hui.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .head-background0 { background-color: #83ccd2; }
        .head-background1 { background-color: #f9a6c4; }
        .head-background2 { background-color: #a0c49e; }
    </style>
</head>
<body class="H-flexbox-vertical">
    <header class="H-header head-background0" id="header">
        <span class="H-icon H-position-relative H-display-inline-block H-float-left H-vertical-middle H-theme-font-color-white H-padding-horizontal-left-5 H-z-index-100" onclick="H.closeWin();"><i class="H-iconfont H-icon-arrow-left H-font-size-18 H-vertical-middle"></i>动态</span>
        <div class="H-header-title H-center-all H-font-size-18 H-text-show-row-1 H-theme-font-color-white H-position-absolute H-width-100-percent" id="tag">
            <div tapmode="" onclick="setPage(0, 'index_body.html');" class="H-header-tag H-font-size-14 H-padding-vertical-both-2 H-padding-horizontal-both-12 H-border-vertical-both-white H-border-horizontal-both-white H-border-radius-12-left-both H-overflow-hidden H-center-all H-theme-background-color-white H-theme-font-color5">男生</div>
            <div tapmode="" onclick="setPage(1, 'girl_body.html');" class="H-header-tag H-font-size-14 H-padding-vertical-both-2 H-padding-horizontal-both-12 H-border-vertical-both-white H-overflow-hidden H-center-all">女生</div>
            <div tapmode="" onclick="setPage(2, 'publish_body.html');" class="H-header-tag H-font-size-14 H-padding-vertical-both-2 H-padding-horizontal-both-12 H-border-vertical-both-white H-border-horizontal-both-white H-border-radius-12-right-both H-overflow-hidden H-center-all ">出版</div>
        </div>
        <span class="H-icon H-position-relative H-display-inline-block H-float-right H-vertical-middle H-theme-font-color-white H-padding-horizontal-right-5 H-z-index-100"><i class="H-iconfont H-icon-search H-font-size-18 H-vertical-middle"></i></span>
    </header>

    <div class="H-main H-flex-item H-position-relative H-overflow-hidden H-overflow-scrolling"></div>
    <footer class="H-footer H-flexbox-horizontal H-theme-background-color-white H-border-vertical-top-after" id="footer">
        <div class="H-flex-item H-center-all H-text-align-center H-theme-font-color-999 H-touch-active  H-theme-font-color-black">
            <div>
                <span class="H-icon H-display-block H-line-height-normal"><i class="H-iconfont H-icon-ui H-font-size-26"></i></span>
                <strong class="H-font-size-11 H-display-block H-font-weight-normal H-margin-vertical-bottom-2">书架</strong>
            </div>
        </div>
        <div class="H-flex-item H-center-all H-text-align-center H-theme-font-color-999 H-touch-active ">
            <div>
                <span class="H-icon H-display-block H-line-height-normal"><i class="H-iconfont H-icon-moban H-font-size-26"></i></span>
                <strong class="H-font-size-11 H-display-block H-font-weight-normal H-margin-vertical-bottom-2">书城</strong>
            </div>
        </div>
        <div class="H-flex-item H-center-all H-text-align-center  H-theme-font-color-999 H-touch-active ">
            <div>
                <span class="H-icon H-display-block H-line-height-normal"><i class="H-iconfont H-icon-doc H-font-size-26"></i></span>
                <strong class="H-font-size-11 H-display-block H-font-weight-normal H-margin-vertical-bottom-2">部落</strong>
            </div>
        </div>
        <div class="H-flex-item H-center-all H-text-align-center  H-theme-font-color-999 H-touch-active ">
            <div>
                <span class="H-icon H-display-block H-line-height-normal"><i class="H-iconfont H-icon-game H-font-size-26"></i></span>
                <strong class="H-font-size-11 H-display-block H-font-weight-normal H-margin-vertical-bottom-2">账户</strong>
            </div>
        </div>
    </footer>
    <script src="../../../script/H.js" type="text/javascript"></script>

    <script type="text/javascript">
        function setStyle(index) {

            var head = H.D("#header");
            H.removeClass(head, "head-background0 head-background1 head-background2");
            H.addClass(head, "head-background" + (index));

            var that = H.D("#tag div:nth-child(" + (index + 1) + ")");
            H.addClass(that, "H-theme-background-color-white H-theme-font-color5");
            H.removeClass(H.siblings(that), "H-theme-background-color-white H-theme-font-color5");
        }
        function setPage(index, url) {
            setStyle(index);
            if (H.isAPICloud()) {
                H.setFrameGroupIndex("groups", index, true);
            }
            else {
                H.D("#H-frame").setAttribute("src", url);
            }
        }

        H.ready(function () {

            H.openFrameGroupNavOrFoot(function (ret, err) {
                setStyle(ret.index);
            }, "groups", [{
                url: 'index_body.html',
                name: 'index_body'
            }, {
                url: 'girl_body.html',
                name: 'girl_body'
            }, {
                url: 'publish_body.html',
                name: 'publish_body'
            }], 0, "#header", "#footer");


        });
    </script>
</body>
</html>
